<!--手动交易对-->
<template>
  <scroller class="scroller bg1">
    <div class="wrapper">

      <VTPairContract ref="pair" configKey="trading_api_contract_default" 
      @change="pairChange" />


      <template v-if="api && pair">
        <div class="row">
          <VTFunlvueKai ref="funlvue" 
          :api="api" :pair="pair" 
          @upOrder="upOrder" />
          
          <VTDepthContract ref="depth" :api="api" :pair="pair" 
          @price="priceClick" @change="priceChange" />
        </div>

        <VTOrder ref="order" :api="api" :pair="pair" type="limit" />
      </template>
    </div>
  </scroller>
</template>

<script>

const weexFunction = weex.requireModule("WeexFunction")
const globalEvent = weex.requireModule('globalEvent');

import VTPairContract from './view/VTPairContract.vue' 
import VTDepthContract from './view/VTDepthContract.vue'
import VTFunlvueKai from './view/VTFunlvueKai.vue'
import VTOrder from './view/VTOrder.vue'
export default {
  components: {
    VTPairContract,
    VTFunlvueKai,
    VTDepthContract,
    VTOrder
  },
  
  data() {
    return {
      api:undefined, //选中api
      pair:undefined, //选中交易对
    };
  },

  mounted() {
    //api资产同步、登录状态改变触发
    globalEvent.addEventListener("upWeex",(e)=>{
      this.$refs.pair && this.$refs.pair.upAvailable();
    });
  },

  methods: {
    
    /************************************************* 通信*/
    //完全显示
    viewappear() {
      this.$refs.pair && this.$refs.pair.viewappear();
      this.$refs.funlvue && this.$refs.funlvue.viewappear();
      this.$refs.depth && this.$refs.depth.viewappear();
      this.$refs.order && this.$refs.order.viewappear();
    },

    //完全隐藏
    viewdisappear() {
      this.$refs.pair && this.$refs.pair.viewdisappear();
      this.$refs.funlvue && this.$refs.funlvue.viewdisappear();
      this.$refs.depth && this.$refs.depth.viewdisappear();
      this.$refs.order && this.$refs.order.viewdisappear();
    },

    /************************************************* 点击*/
    //api、prie改变
    pairChange(api, pair) {
      weexFunction.debugLog('交易对改变了1')
      this.api = api;
      this.pair = pair;
    },
    
    //深度-价格点击
    priceClick(last) {
      this.$refs.funlvue && this.$refs.funlvue.priceChange(last);
    },

    //下单触发-更新订单
    upOrder() {
      this.$refs.order && this.$refs.order.refreshClick(false);
    }
  }
};
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.scroller {
  flex: 1;
  flex-direction: column;
}
.wrapper{
  flex-direction: column;
  width:750px;
  padding-left: 40px;
  padding-right: 40px;
}
</style>